@import '../../styles/util'

$menu-background: $nav-background
$menu-sub-background: $nav-background
$menu-sub-opacity: 0.95
$menu-normal-width: 190px
$menu-collapsed-width: 48px
$menu-item-height: 40px
$menu-text-color: $text-reverse
$menu-text-opacity: 0.6
$menu-item-active-bg: rgba(255,255,255,.1)
$menu-item-hover-bg: rgba(255,255,255,.1)
$menu-item-icon-color: $icon-reverse

@mixin menu-item-head()
  width: $menu-normal-width
  height: $menu-item-height
  padding-left: 1rem
  border-left: 2px solid transparent
  border-right: 2px solid transparent
  font-size: $font-md
  cursor: pointer
  color: $menu-text-color
  opacity: $menu-text-opacity

  > .icon
    flex-shrink: 0
    margin-right: .75rem
    fill: $menu-item-icon-color

  &:hover
    background: $menu-item-hover-bg
    opacity: 1

    > .icon
      fill: $menu-item-icon-color

  &.active
    border-left: 2px solid $brand-primary
    background: $menu-item-active-bg
    opacity: 1

    > .icon
      fill: $menu-item-icon-color

@mixin menu-item-head-collapsed()
  justify-content: center
  width: $menu-collapsed-width
  padding-left: 0

  > .icon
    margin: 0
    width: 1rem
    height: 1rem

.fui-menu
  display: inline-flex
  flex-direction: column
  flex-shrink: 0
  width: $menu-normal-width
  background-color: $menu-background

  .fui-icon
    fill: $menu-item-icon-color

  &-foot
    flex-shrink: 0
    @include flex-align(center, center)
    height: $menu-item-height
    background: rgba(0, 0, 0, 0.1)
    padding: 0 0.6rem

  &-title
    flex-shrink: 0
    @include text-ellipsis()
    height: 3rem
    line-height: 3.5rem
    padding-left: 1rem
    font-size: 1rem
    color: $menu-text-color

  &-body
    flex: 1
    overflow: auto

  &-toggle
    cursor: pointer
    transition: transform 0.5s ease
    opacity: $menu-text-opacity

  &.collapsed
    width: $menu-collapsed-width

    .fui-menu-toggle
      transform: rotate3d(0, 1, 0, 180deg)

    .fui-menu-title
      text-align: center
      padding-left: 0


.fui-menu-item
  @include flex-align(center, flex-start)
  @include menu-item-head()

  > .content
    @include text-ellipsis()

  &.collapsed
    @include menu-item-head-collapsed()

.fui-sub-menu
  position: relative
  display: flex
  flex-direction: column
  cursor: pointer

  &-head
    @include flex-align(center, flex-start)
    @include menu-item-head()
    position: relative

    .icon
      fill: $menu-item-icon-color

    .caret
      position: absolute
      right: 1rem
      top: 50%
      transform: translateY(-50%)
      transition: transform 0.3s linear

      &.down
        transform: translateY(-50%) rotate(180deg)

    &.active .caret
      fill: $menu-item-icon-color

  &-title
    @include text-ellipsis()

  &-children
    background: $menu-sub-background

    &.float
      padding-left: 0
      opacity: $menu-sub-opacity
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175)

  &.collapsed
    .fui-sub-menu-head
      @include menu-item-head-collapsed()

.fui-menu-item-group
  &-title
    @include text-ellipsis()
    height: $menu-item-height
    line-height: $menu-item-height
    padding-left: 1rem
    font-size: 1rem
    color: $menu-text-color

  &.collapsed
    .fui-menu-item-group-title
      padding-left: 0
      text-align: center
      font-size: $font-md
